function add_htmle(parentId){
	$( "#dialog-form" ).dialog( "open" );
}

function create_html_element(parentId, tagName, id, content){
	//alert(parentId + " " + tagName +" "+ id +" " + content);
	if (tagName == "img"){
		var img = create_img_tag(parentId, id, content);
		return img;
	}
	var newElem = $(document.createElement(tagName)).appendTo("#" + parentId).attr("id", id).text(content);
	dhxTree.insertNewChild(parentId , id, id, 0,0,0,0, "CHILD,CHECKED");
	
	if (content != ""){
		dhxTree.insertNewChild(id , id+"-text", content, 0,0,0,0, "");
		dhxTree.setItemImage2(id+"-text",'','','');
		//dhxTree.editItem(id+"-text");	// make text node editable
	}
	
	newElem.attr("type", "basic").addClass("basic-element");
	
	// create an associated Table element holding attributes
	var propTable = create_prop_table(id, content);
	newElem.data("prop_table", propTable);
	//div.data("attributes", {"id": id, "angle": 0});
	
	newElem.click(function(e){
		e.stopPropagation();	// stop event to not choose ancestor
		if ($(this).data("dragging")) return;
		zIndexMax ++;
		$(this).css( "z-index" , zIndexMax );
		select_element(id);
	});
	
	//newElem.draggable();
	
	return newElem;
}
function create_img_tag(parentId, img_id, img_name){
	var img = $(document.createElement("img")).attr("src", "/uploads/images/" + img_name)
				.attr("id", img_id).appendTo("#"+parentId);
	dhxTree.insertNewChild(parentId , img_id, "image-"+img_name, 0,0,0,0, "");
	
	// create an associated Table element holding attributes
	var propTable = create_prop_table(img_id, "");
	img.data("prop_table", propTable).addClass("basic-element");
	//div.data("attributes", {"id": id, "angle": 0});
	
	img.click(function(e){
		e.stopPropagation();	// stop event to not choose ancestor
		select_element(img_id);
	});
	
	img.load(function(){
		//$("#"+parentId).css("width", $(this).width())
		$("#"+parentId).width(this.width+3).height(this.height+3);

		//alert($(this).width() + 'x' + $(this).height());
	});
	
	//img.draggable({});

	
	return img;
}

function create_prop_table(elementId, content){
	var table = $(document.createElement("table"));
	table.addClass("property-table");
	$("<tr><th colspan='2'>" + elementId + "</th></tr>").appendTo(table);
	table.attr("width", "100%");
	table.attr("cellspacing", "0");
	table.attr("cellpadding", "4px");
	table.attr("elementId", elementId);
	
	if (content == "") return table;
	
	// add the first - text property
	var tr = $(document.createElement("tr")).appendTo(table);
	$(document.createElement("td")).addClass("attr-name").attr("width", "50%").text("Text").appendTo(tr);
	$("table tr#css_key_value td.attr-value").clone(true,true).text(content).appendTo(tr);
	return table;
}

function select_element(id){
	
	if (selectingId == id) return false;
	
	if (selectingId != ""){
		unselect_element(selectingId);
		selectingId = "";
	}
	
	selectingId = id;
	
	// select on tree
	dhxTree.selectItem(id,false,false);
	
	$("#" + id).addClass("selecting-element");
	
	var table = $("#"+id).data("prop_table");	// get attributes table element
	$("div#element-attributes ul#icons:first").before(table);	// insert into attribute area
	$("div#element-attributes ul#icons").show();
	// display control element panel
	//var left = $("#"+id).offset().left;
	//var top = $("#"+id).offset().top - 20;
	//$("div#elem-cltr").offset({top: top, left: left}).show("slow");
}

function unselect_element(id){
	$("#"+id).data("prop_table").detach();	// remove the table from attribute area
	$("#"+id).removeClass("selecting-element");	//
	
	//$("div#elem-cltr").hide();	// hide control element panel
}

function basic_set_prop(id, name, value){
	if (name=="Text"){
		$("#"+id).text(value);
		dhxTree.setItemText(id + "-text", value, "abcd");
		return;
	}
	
	// In case of Css attribute
	$("#"+id).css(name, value);
	
}
function basic_unset_prop(id, name){
	if (name=="Text"){
		value = "";
		$("#"+id).text(value);
		dhxTree.setItemText(id + "-text", value, "abcd");
		return;
	}
	
	// In case of Css attribute
	$("#"+id).css(name, "");
	
}

function delete_element(id){
	if (selectingId == "") return false;
	if (selectingId == id){
		selectingId = "";
		$("div#element-attributes ul#icons").hide();
	}
	
	$("#"+id).data("prop_table").remove();	// remove properties table
	
	$("#"+id).remove();	// remove element itself
	dhxTree.deleteItem(id, false);	// remove on tree
}

function initialize_tree(){
	dhxTree.enableDragAndDrop(true, false);
    //dhxTree.setDragBehavior("complex", false);
    
    // set onSelect event on tree
    var regxTnode = /text$/;
    var regxImg = /img-/;
    dhxTree.attachEvent("onSelect", function(id){
    	if (id == "card") return;
    	if (regxTnode.test(id)) return;
    	select_element(id);
    });
    
    // beforeDrag handling
    /**/
    dhxTree.attachEvent("onBeforeDrag", function(sId){
    	if (regxTnode.test(sId)) return false;
    	return true;
    });
    /**/
    
    dhxTree.attachEvent("onDrag", function(sId,tId,id,sObject,tObject){
    	if (regxTnode.test(tId) || regxImg.test(tId)) return false;
    	return true;
    });
    
    // onDrop handling
    dhxTree.attachEvent("onDrop", function(sId,tId,id,sObject,tObject){
    	//alert(sId + " " + tId);
    	$("#" + sId).appendTo("#" + tId);
    });
    
    //dhxTree.enableItemEditor(true);
}